<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>todo list练习</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimun-scale=1,maximun-scale=1,user-scalable=no" />
		<style>
			.pc #icon {
				background-image: url(img/pc.png);
			}
			.lt640 #icon{
				width: 400px;
				height: 400px;
			}
			.gt1200 #icon {
				width: 500px;
				height: 500px;
			}
			@media only screen and (max-width: 767px)
		</style>
		</<script type="text/javascript">
			function xys(){
				var html = document.querySelector('html');
				var userAgent = navigator.userAgent;
				html.className = "";
				if(userAgent.indexOf('iPhone') != -1) {
					//console.info('iphonee')
					html.classList.add('iphone');
				} else if(userAgent.indexOf('Android') != -1) {
					//console.info('Android')
					html.classList.add('android');
				} else if(userAgent.indexOf('iPad') != -1) {
					//console.info('ipad')
					html.classList.add('ipad');
				} else {
					//console.info('pc')
					html.classList.add('pc');
				}
				//获取窗口的宽度来设定样式
				if(window.innerWidth < 640) {
					html.classList.add('640');
					html.classList.add('lt960');
					html.classList.add('lt1200');
				} else if(window.innerWidth < 960) {
					html.classList.add('960');
					html.classList.add('gt640');
					html.classList.add('lt1200');
				}  else if(window.innerWidth < 1200) {
					html.classList.add('1200');
					html.classList.add('gt640');
					html.classList.add('gt960');
					
				} 
			}
			xys();
		</script>
	</head>
	<body>
		<!--
			1.移动端位置/pc可用
			2.输入框：输入代办事项
			3.未完成列表，能够显示未完成内容（可以改为完成，删除）
			4.完成列表：能够显示完成的内容（可以改为未完成，删除）
			
			项目事项步骤：
			1.写HTML结构
			2.css样式
			3.javascript功能
				3.1输入框的输入功能
				3.2未完成列表显示功能
				3.3完成列表显示功能
				3.4修改和删除的功能
		-->
		<div id="icon">
			helloworld
		</div>
	</body>
</html>
